@extends('user.layouts.master')
@section('content')
    <form action="{{route('user.info.update',$user['id'])}}" method="post" id="edit-icon">
        @csrf @method('PUT')
        <div class="card col-10">
            <div class="card-header">
                修改用户图标
            </div>
{{--下这个隐藏的input输入框在提交表单的时候就会将用户上传的图片地址传递到后台中--}}
            <input type="text" hidden name="icon">
            <div class="card-body text-center">
                <div class="avatar avatar-xxl ">
                    <a href="javascript:;" onclick="upImagePc()">
                        {{--传递过来的$user对象的icon属性中存放这当前用户的图像地址--}}
                        <img src="{{$user['icon']}}" id="icon" alt="图片加载异常" class="avatar-img rounded-circle">
                    </a>
                </div>
                <div class="mt-3">
                    <p class="text-secondary small ">
                       <strong> 请上传200x200 大小的jpeg图片，展示效果最佳</strong>
                    </p>
                </div>
            </div>
            <div class="card-footer text-center">
                <button class="btn btn-primary btn-sm">提交修改</button>
            </div>
        </div>
    </form>
@endsection
@push('js')
    <script>
        //上传图片
        function upImagePc() {
            require(['hdjs'], function (hdjs) {
                hdjs.image(function (images) {
                    //可以在控制台中打印images的内容
                    console.log(images[0]);
                    //上传成功的图片，数组类型
                    //图片上传成功之后将图片的地址赋值给当前页面中标签name为icon的标签的val值,由于imgrul在from表单中,所以当提交的时候,会把这个icon以及里面的值用户新修改的图片地址传递到后台,方便后台处理
                    $("[name='icon']").val(images[0]);
                    // 图片上传成功后会设置id为icon的元素的src地址为上传的图片的地址
                    $("#icon").attr('src', images[0]);
                    //下面这一行也可以不写,让用户自己点击按钮提交表单,如果有下面折行的话,用户上传提交过图片以后form表单会自动提交.
                    // $("#edit-icon").submit();
                })
            });
        }
    </script>
@endpush

